<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./scripts/jquery-3.6.1.js"></script>
</head>
<body>

    <div></div>

    <button id="btn01">点我一下</button>
    
    <script>

        /* 
            引入jQuery库，其实就是向网页中添加了一个新的函数$(jQuery)
                - $ 是jQuery中的核心函数，jQuery的所有功能都是通过该函数来进行的
                - 核心函数的功能
                    - 两种作用
                        1. 将它作为工具类使用
                            - 在核心函数中jQuery为我们提供了多个工具方法

                        2. 将它作为函数使用
                            - 将一个函数作为$的参数
                                - 这个函数会在文档加载完毕之后执行
                                - 相当于：
                                    document.addEventListener("DOMContentLoaded", function(){})

                            - 将选择器字符串作为参数
                                - jQuery自动去网页中查找元素
                                - 作用类似于 document.querySelectorAll("...")
                                - 注意：
                                    通过jQuery核心函数查询到的结果并不是原生的DOM对象，
                                        而是一个经过jQuery包装过的新的对象，这个对象我们称其为jQuery对象
                                        jQuery对象中为我们提供了很多新的方法，方便我们做各种DOM操作
                                            但是jQuery对象不能直接调用原生DOM对象的方法
                                            通过我们为jQuery对象命名时，会使用$开头，加以区分

                            - 将DOM对象作为参数
                                - 可以将DOM对象转换为jQuery对象，从而使用jQuery对象的方法
                            
                            - 将html代码作为参数
                                - 会根据html代码来创建元素（jQuery对象）


        */

        // console.log(jQuery)

        // var num = 10
        // function fn(){}

        // console.log($.isFunction(num)) false

        // console.log($.isFunction(fn)) // true

        // console.log(typeof fn === "function")

        // console.log($)


        $(function(){

            $("#btn01").click(function(){
                // alert("你点我干嘛~~")

                var btn = document.getElementById("btn01") // [object HTMLButtonElement]

                var $btn = $("#btn01") // [object Object]

                // alert($(btn))

                var $h1 = $("<h1>我是一个标题</h1>") // 会根据html代码创建元素

                $("div").append($h1)


            })


        })



    </script>
</body>
</html>